<!-- 设备管理-设备运行-设备运行记录查看弹窗页面 -->
<template>
  <px-dialog v-model="dialogVisible" class="view-equip-detail" title="详情" width="960px" @open="openDialog" @close="closeDialog">
    <div class="view-equip-title">设备信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">科室</div>
          <div class="text">{{ formValue.classNameDesc || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">系统</div>
          <div class="text">{{ formValue.systemName || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备总称</div>
          <div class="text">{{ formValue.categoryName || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备类型</div>
          <div class="text">{{ formValue.typeName || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备型号</div>
          <div class="text">{{ formValue.modelName || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备编号</div>
          <div class="text">{{ formValue.eqpId || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item" style="width: 100%">
          <div class="label">设备名称</div>
          <div class="text">{{ formValue.eqpName || "-" }}</div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">设备运行状态</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备运行状态</div>
          <div class="text">{{ formValue.eqpRunStatusValue || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">状态开始时间</div>
          <div class="text">{{ formValue.startTime || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">状态结束时间</div>
          <div class="text">{{ formValue.endTime || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">状态时长</div>
          <div class="text">{{ formValue.runTimes || "-" }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">状态原因</div>
          <div class="text">{{ formValue.downCauseName || "-" }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">状态类型</div>
          <div class="text">{{ formValue.downTypeName || "-" }}</div>
        </div>
      </div>
    </div>
    <div class="equip-dialog-footer" style="text-align: right">
      <px-button type="primary" @click="closeDialog">关闭</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

// 父级传过来的值
const emits = defineEmits(["closeDialog"]);
const props = defineProps(["dialogVisible", "rowData"]);
const dialogVisible = computed(() => props.dialogVisible);

const formValue = ref({
  classNameDesc: "",
  systemName: "",
  categoryName: "",
  typeName: "",
  modelName: "",
  eqpId: "",
  eqpName: "",
  eqpRunStatusValue: "",
  startTime: "",
  endTime: "",
  runTimes: "",
  downCauseName: "",
  downTypeName: ""
});

// 打开弹窗
const openDialog = async () => {
  formValue.value = JSON.parse(JSON.stringify(props.rowData));
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {};
  emits("closeDialog");
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail .view-equip-wrap .view-equip-content .view-equip-item {
  width: 50%;
  .label {
    background: #e7eefb;
  }
}
</style>
